<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="../resource/themes/default/easyui.css">
    <script src="../resource//jquery.min.js"></script>
    <script src="../resource//jquery.easyui.min.js"></script>

    <style>
        html,
        body {
            margin: 0 auto;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .mt_20 {
            margin-top: 20px;
        }

        .datagrid-cell {
            background-color: white;
        }

        .datagrid-header td,
        .datagrid-body td,
        .datagrid-footer td {
            border: none;
        }

        .datagrid-row-selected {
            background-color: white;
        }

        .datagrid-row-over,
        .datagrid-header td.datagrid-header-over {
            background-color: white;
        }

        .datagrid-header,
        .datagrid-toolbar,
        .datagrid-pager,
        .datagrid-footer-inner {
            background-color: white;
        }

        .panel-header,
        .panel-body {
            border: none;
        }

        .datagrid-cell-check {
            line-height: 22px;
            height: 22px;
        }

        .datagrid-header-check input,
        .datagrid-cell-check input {
            margin: 2px auto;
        }

        .datagrid-row-over .datagrid-cell,
        .datagrid-cell-check {
            background-color: white;
        }

        .datagrid-row-selected .datagrid-cell,
        .datagrid-row-selected .datagrid-cell-check {
            background-color: black;
            color: white;
        }

        .datagrid-cell,
        .datagrid-cell-group,
        .datagrid-header-rownumber,
        .datagrid-cell-rownumber {
            line-height: 22px;
        }

        /* .datagrid-htable,
        .datagrid-btable,
        .datagrid-ftable {
            border-collapse: collapse;
        } */

        .datagrid-body {}

        .datagrid-header-row,
        .datagrid-row {
            height: 32px;
            background: white;
        }
    </style>

    <link href="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>

</head>

<body>

    <div class="container mt_20">

        <table id="dg" style="width:1000px;height:400px;"></table>


    </div>

    <script>

        $(function () {



            $('#dg').datagrid({
                data: [
                    { "rowNo": 1, "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
                    { "rowNo": 2, "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
                    { "rowNo": 3, "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
                    { "rowNo": 4, "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
                    { "rowNo": 5, "selected": true, "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
                    { "rowNo": 6, "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
                    { "rowNo": 7, "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
                    { "rowNo": 8, "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
                    { "rowNo": 9, "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
                    { "rowNo": 10, "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
                ],
                fitColumns: true,
                columns: [[

                    {
                        width: "30",
                        field: "rowNo",
                        title: "序号",
                        hidden: false
                    },
                    {
                        width: "80",
                        field: "ck",
                        checkbox: true,
                        hidden: false
                    },
                    { field: 'productid', title: '产品编号', width: 100 },
                    { field: 'productname', title: '产品名称', width: 100 },
                    { field: 'unitcost', title: '价格', sortable: true }
                ]]
            });

            $('#dg').datagrid('load', {
                name: 'easyui',
                address: 'ho'
            });

            $(window).load(function () {
                $(".content").mCustomScrollbar();
            });


        });
    </script>

</body>

</html>